var vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
    data: {
        host,
        f1_tab: 1, // 1F 标签页控制
        f2_tab: 1, // 2F 标签页控制
        f3_tab: 1, // 3F 标签页控制
        cart_total_count: 0, // 购物车总数量
        carts: [], // 购物车数据,
        username: '',
        content_category: [],
        banners: [] // 轮播图数据
    },
    created() {
        // 处理页面中所有FastDFS图片路径
        this.$nextTick(() => {
            this.processAllImages();
        });
    },
    mounted() {
        // 获取购物车数据
        // this.get_carts();

        // 获取cookie中的用户名
        this.username = getCookie('username');

        // 获取轮播图数据
        this.get_banners();

        this.get_cart();

        // 处理页面中的所有图片
        this.$nextTick(() => {
            this.processAllImages();
        });
    },
    methods: {
        // 处理轮播图图片URL
        processBannerImages: function () {
            if (!this.banners || !this.banners.length) return;

            this.banners.forEach(banner => {
                if (banner.image) {
                    // 如果已经是完整URL，不需要处理
                    if (banner.image.startsWith('http://') || banner.image.startsWith('https://')) {
                        // 已经是完整URL，无需处理
                    }
                    // 如果是FastDFS路径，确保使用正确的服务器地址
                    else if (banner.image.startsWith('/group1/')) {
                        banner.image = (window.FDFS_BASE_URL || 'http://image.meiduo.site:8888') + banner.image;
                    }
                    // 如果是静态资源路径，使用静态资源服务器地址
                    else if (banner.image.startsWith('/static/') || banner.image.startsWith('/images/')) {
                        banner.image = (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + banner.image;
                    }
                }
            });

            // 强制更新视图
            this.$forceUpdate();
        },

        // 获取轮播图数据
        get_banners: function () {
            var url = this.host + '/contents/banners/';
            console.log('请求轮播图数据URL:', url);

            axios.get(url)
                .then(response => {
                    console.log('轮播图数据:', response.data);
                    // 处理后端返回的轮播图数据，兼容不同格式
                    if (response.data && response.data.code === 0 && Array.isArray(response.data.banners)) {
                        // 后端返回的标准格式: {code: 0, errmsg: 'OK', banners: [...]}
                        this.banners = response.data.banners;
                    } else if (response.data && Array.isArray(response.data)) {
                        // 直接返回数组格式
                        this.banners = response.data;
                    } else if (response.data && Array.isArray(response.data.banners)) {
                        // banners字段格式
                        this.banners = response.data.banners;
                    } else {
                        console.warn('轮播图数据格式不正确:', response.data);
                        this.banners = [];
                    }

                    // 处理轮播图图片URL
                    this.processBannerImages();
                })
                .catch(error => {
                    console.log('获取轮播图数据失败:', error.response ? error.response.data : error.message);
                    // 如果接口404，尝试使用模拟数据
                    if (error.response && error.response.status === 404) {
                        console.warn('轮播图接口404，使用模拟数据');
                        this.banners = [
                            {
                                id: 1,
                                image: '/images/banner01.jpg',
                                url: '#',
                                name: '轮播图1'
                            },
                            {
                                id: 2,
                                image: '/images/banner02.jpg',
                                url: '#',
                                name: '轮播图2'
                            },
                            {
                                id: 3,
                                image: '/images/banner03.jpg',
                                url: '#',
                                name: '轮播图3'
                            }
                        ];
                    } else {
                        this.banners = [];
                    }

                    // 处理轮播图图片URL
                    this.processBannerImages();
                })
        },

        // get_category_data:function(){
        //     var url = this.host + '/content_category/';
        //     axios.get(url, {
        //         responseType: 'json',
        //     })
        //         .then(response => {
        //             this.content_category = response.data.content_category
        //         })
        //         .catch(error => {
        //             console.log(error.response);
        //         })
        // },
        // 退出登录按钮
        logoutfunc: function () {
            var url = this.host + '/logout/';
            axios.delete(url, {
                responseType: 'json',
                withCredentials: true,
            })
                .then(response => {
                    location.href = 'login.html';
                })
                .catch(error => {
                    console.log(error.response);
                })
        },
        // 获取购物车数据
        get_cart() {
            let url = this.host + '/carts/simple/';
            axios.get(url, {
                responseType: 'json',
                withCredentials: true,
            })
                .then(response => {
                    // 简单接口直接返回总数量
                    if (response.data.cart_total_count !== undefined) {
                        this.cart_total_count = response.data.cart_total_count;
                    } else {
                        // 兼容完整接口
                        this.carts = response.data.cart_skus;
                        this.cart_total_count = 0;
                        for (let i = 0; i < this.carts.length; i++) {
                            if (this.carts[i].name.length > 25) {
                                this.carts[i].name = this.carts[i].name.substring(0, 25) + '...';
                            }
                            this.cart_total_count += this.carts[i].count;
                        }
                    }
                })
                .catch(error => {
                    console.log(error);
                })
        },

        // 处理图片URL，确保FastDFS图片能正确显示
        getImageUrl(imageUrl) {
            // 处理FastDFS图片URL，确保正确显示
            if (!imageUrl) return '/images/default.png';

            // 如果已经是完整URL，直接返回
            if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
                return imageUrl;
            }

            // 如果是相对路径，添加FastDFS前缀
            if (imageUrl.startsWith('/group1/')) {
                return window.FDFS_BASE_URL + imageUrl;
            }

            // 如果是静态资源路径，使用API服务器地址
            if (imageUrl.startsWith('/static/')) {
                return this.host + imageUrl;
            }

            // 其他情况，直接返回
            return imageUrl;
        },

        // 处理图片加载错误
        handleImageError(event) {
            // 图片加载失败时使用默认图片
            console.warn('图片加载失败:', event.target.src);
            event.target.src = '/images/default.png';
        },

        // 处理页面中的所有图片
        processAllImages() {
            // 获取所有img标签
            const images = document.querySelectorAll('img');
            const fdfsBaseUrl = window.FDFS_BASE_URL;

            images.forEach(img => {
                const src = img.getAttribute('src');
                // 如果是FastDFS路径，添加前缀
                if (src && src.startsWith('/group1/')) {
                    img.setAttribute('src', fdfsBaseUrl + src);
                    // 添加错误处理
                    img.onerror = this.handleImageError;
                }
                // 如果是静态资源路径，使用API服务器地址
                else if (src && src.startsWith('/static/')) {
                    img.setAttribute('src', this.host + src);
                    // 添加错误处理
                    img.onerror = this.handleImageError;
                }
            });
        }

    }
});










$(function () {
    // 楼层选项卡
    var $tab = $('.subtitle a');
    var $content = $('.goods_list_con .goods_list');

    $tab.click(function () {
        var $index = $tab.index($(this));
        $(this).addClass('active').siblings().removeClass('active');
        $content.eq($index).addClass('goods_list_show').siblings().removeClass('goods_list_show');
    });
});